<template>
    <div class="goods-type-root">
        <!--条件搜索框-->
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="种类名称：">
                <el-input v-model="queryForm.typeName" placeholder="请输入种类名称" @input="getTypeList"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getTypeList" icon="el-icon-search">查询</el-button>
                <el-button type="success" @click="addType" icon="el-icon-plus">添加新种类</el-button>
            </el-form-item>
        </el-form><!--/ 条件搜索框-->
        <!--列表-->
        <div>
            <el-table :data="tableData" style="width: 100%" :height="500">
                <el-table-column fixed label="" type="selection" width="55"></el-table-column>
                <el-table-column prop="typeId" label="种类ID" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="typeName" label="种类名称" width="180"></el-table-column>
                <el-table-column prop="isDefault" label="默认"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <!--// 详情按钮-->
                        <el-button type="warning" @click="handleClick(scope.row)" size="small" icon="el-icon-document"></el-button>
                        <!--删除按钮-->
                        <!--<el-button type="danger" size="small" icon="el-icon-delete"></el-button>-->
                        <!--删除确认框-->
                        <el-popconfirm title="确认删除吗?"
                                       @confirm="handleDelete(scope.$index, scope.row)"
                                       style="margin-left: 10px">
                            <!--删除按钮-->
                            <el-button type="danger" size="small" icon="el-icon-delete"
                                       slot="reference"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div><!--/ 列表-->
        <!--分页插件-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParam.pageNum"
                    :page-sizes="pageParam.sizes"
                    :page-size="pageParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParam.total">
            </el-pagination>
        </div><!--/ 分页插件-->

        <!--种类详情-->
        <TypeDetail v-if="detailFlag" :type="type" @close="handleClick"></TypeDetail>

        <!--添加种类-->
        <TypeAdd v-if="addFlag" @close="addType"></TypeAdd>
    </div>
</template>

<script>
import API from '@/api/api'
import TypeDetail from "../../../components/goodsType/TypeDetail";
import TypeAdd from "../../../components/goodsType/TypeAdd";
export default {
    name: "GoodsType",
    components: {
      TypeDetail, TypeAdd,
    },
    data() {
        return {
            // 详情标志位
            detailFlag: false,
            addFlag: false,
            // 用于组件内数据传输
            type: {},
            queryForm: {
                typeName: '',
            },
            // 分页参数
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                sizes: [5, 10, 50, 100, 200],
            },
            // 列表数据-展示
            tableData: [
                // {
                // typeId: '1',
                // typeName: '牛奶',
                // isDefault: '1',
                // },
            ],
        }
    },
    mounted() {
        this.getTypeList();
    },
    methods: {
        // 列表条件查询
        getTypeList() {
            let url = API.type.selectTypeList;
            let param = {};
            param.param = this.queryForm;
            param.pageNum = this.pageParam.pageNum;
            param.pageSize = this.pageParam.pageSize;

            this.$post(url, param).then( res => {
                let data = res.data;
                if (data.success) {
                    this.tableData = data.data.list;
                    this.pageParam.total = data.data.total;
                    this.tableData.forEach(item => item.isDefault = item.isDefault === 1? '是':'否')
                }
            }).catch( err => {
                this.$message.error("请求失败!");
            })

        },
        // 查看按钮
        handleClick(row) {
            console.log(this.type, '看看type~~~~~~~~~~');
            this.detailFlag = !this.detailFlag;
            if (row) {
                this.type = JSON.parse(JSON.stringify(row));
                this.type.isDefault = this.type.isDefault === '是'? 1:0;
            }
            if (!this.detailFlag) {
                this.getTypeList();
            }
        },
        // 添加种类
        addType() {
            this.addFlag = !this.addFlag;
            if (!this.addFlag) {
                this.getTypeList();
            }
        },
        // 删除按钮
        handleDelete (index, row) {
            let temp = JSON.parse(JSON.stringify(row));
            temp.isDefault = temp.isDefault === '是'? 1:0;
            if (temp.isDefault === '是' || temp.isDefault === 1 && !this.$hasAdmin) {
                this.$message.closeAll();
                this.$message.warning("请联系管理员删除默认种类!");
                return;
            }
            let url = API.type.remove;
            let param = {typeList: []};
            param.typeList.push(temp);
            this.$post(url, param).then( res => {
                let data = res.data;
                if (data.success) {
                    this.$message.success({
                        showClose: true,
                        message: "删除成功"
                    });
                    this.getTypeList();
                }
            });

        },
        // 分页
        handleSizeChange(val) {
            this.pageParam.pageSize = val;
            this.getTypeList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageParam.pageNum = val;
            this.getTypeList();
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>

</style>
